
<!--昊广用户管理添加-->
<template>
  <div class="table-panel">
    <el-form ref="user" class="table" :model="user" :rules="validateRules" label-width="120px">
      <el-form-item label="用户昵称">
        <el-input type="text" v-model="user.nickName"/>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="user.username" :disabled="user.id!=null"/>
      </el-form-item>
      <el-form-item v-if="!user.id" label="用户密码" prop="password">
        <el-input type="password" v-model="user.password"/>
      </el-form-item>

       <el-form-item label="用户头像">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="user.salt"/>
          <!-- 文件上传按钮 -->
          <el-button type="success" icon="el-icon-upload" @click="imagecropperShow=true">{{user.salt == '' ? '上传' : '更换'}}头像</el-button>

          <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调 
              <input type="file" name="file"/>
            -->
          <image-cropper
                v-show="imagecropperShow"
                :width="300"
                :height="300"
                :key="imagecropperKey"
                :url="BASE_API+'/sys/file/uploadImg'"
                field="file"
                @close="close"
                @crop-upload-success="cropSuccess"/>
      </el-form-item>
      <el-form-item label="简介">
        <el-input type="textarea" v-model="user.description"/>
        <!-- <quill-editor
          class="editor"
          ref="myTextEditor"
          v-model="user.description"
          :options="editorOption"
          disabled
          @change="onEditorChange($event)"
        >
        </quill-editor> -->
          <!-- <tinymce :height="300" v-model="user.description"/> -->
      </el-form-item>

      <el-form-item align="center">
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import userApi from '@/api/acl/user'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import Tinymce from '@/components/Tinymce'


const defaultForm = {
  username: '',
  nickName: '',
  password: '',
  salt:'',
  description:'',
  category:1
}


export default {
  components: { ImageCropper, PanThumb, Tinymce},
  data() {
    var validUsername = (rule, value, callback) => {
      if(value != '' && value != null&& this.user.id==null) {
        userApi.usernameIsExist(value).then(res => {
            if(res.data.exist) {
              callback(new Error('该用户名已存在，请重新输入'));
            } else {
              callback()
            }
        })
      }else{
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if(this.user.id==null){
        if (value.length < 6 || value.length > 20) {
          callback(new Error('密码不能小于6位且不能大于20位'))
        } else {
          callback()
        }
      }else{
        callback()
      }
    }
    return {
      user: defaultForm,
      saveBtnDisabled: false, // 保存按钮是否禁用,
      validateRules: {
        username: [
          { required: true, trigger: 'blur', message: '用户名必须输入' },
          { validator: validUsername, trigger: 'blur'} ],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      //上传弹框组件是否显示
      imagecropperShow:false,
      imagecropperKey:0,//上传组件key值
      BASE_API:process.env.BASE_API, //获取dev.env.js里面地址,
      // editorOption: {
      //   modules: {
      //     toolbar: [
      //       ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
      //       ["blockquote", "code-block"], // 引用  代码块
      //       [{ header: 1 }, { header: 2 }], // 1、2 级标题
      //       [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
      //       [{ script: "sub" }, { script: "super" }], // 上标/下标
      //       [{ indent: "-1" }, { indent: "+1" }], // 缩进
      //       // [{'direction': 'rtl'}],                         // 文本方向
      //       [{ size: ["small", false, "large", "huge"] }], // 字体大小
      //       // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
      //       // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
      //       // [{ font: [] }], // 字体种类
      //       [{ align: [] }], // 对齐方式
      //       ["clean"], // 清除文本格式
      //       ["link", "image"], 
      //       // ["link", "image", "video"], // 链接、图片、视频
      //     ], //工具菜单栏配置
      //   },
      //   placeholder: "请在这里添加班组介绍", //提示
      //   readyOnly: false, //是否只读
      //   theme: "snow", //主题 snow/bubble
      //   syntax: true, //语法检测
      // },
    }
  },

  // 监听器
  watch: {
    $route(to, from) {
      // console.log(to)
      // console.log(from)
      this.init()
    }
  },

  // 生命周期方法（在路由切换，组件不变的情况下不会被调用）
  created() {
    this.init()
  },

  methods: {

    close() { //关闭上传弹框的方法
        this.imagecropperShow=false
        //上传组件初始化
        this.imagecropperKey = this.imagecropperKey+1
    },
    //上传成功方法
    cropSuccess(data) {
      this.imagecropperShow=false
      //上传之后接口返回图片地址
      this.user.salt = data.imgurl
      this.imagecropperKey = this.imagecropperKey+1
    },

    // 表单初始化
    init() {
      // debugger
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.fetchDataById(id)
      } else {
        // 对象拓展运算符：拷贝对象，而不是赋值对象的引用
        this.user = { ...defaultForm }
      }
    },

    onEditorChange(event){
      console.log(event)
    },

    saveOrUpdate() {
      this.$refs.user.validate(valid => {
        if (valid) {
          this.saveBtnDisabled = true // 防止表单重复提交
          if (!this.user.id) {
            this.saveData()
          } else {
            this.updateData()
          }
        }
      })
    },

    // 新增讲师
    saveData() {
      userApi.save(this.user).then(response => {
        // debugger
        if (response.success) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/authority/user/list' })
        }
      })
    },

    // 根据id更新记录
    updateData() {
      // teacher数据的获取
      userApi.updateById(this.user).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/authority/user/list' })
        }
      })
    },

    // 根据id查询记录
    fetchDataById(id) {
      userApi.getById(id).then(response => {
        // debugger
        // console.log('userinfo')
        console.log(response)
        this.user = response.data.userinfo
      })
    }

  }
}
</script>
<style scoped>
.app-container{
  /* margin-left: 1%;
  margin-right: 1%; */
  width: 100%;
}
.table{
  margin-left: 25%;
  margin-right: 25%;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
}

.ql-editor {
    min-height: 300px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}

.ql-snow .ql-picker.ql-size {
    width: 65px;
}
</style>